﻿<template>
    <view class="wrap">
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar leftIcon="search" title="购物车" safeAreaInsetTop fixed placeholder @leftClick="goSearch"></u-navbar>

        <!-- 购物车主结构  -->
        <view v-if="shoppingCard.list && shoppingCard.list.length > 0">
            <u-checkbox-group placement="column" v-model="cartIds" @change="itemChange">
                <view class="cart-shoppingcard" v-for="(item, index) in shoppingCard.list" :key="index">
                    <view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-align-center">
                        <view class="cart-shopp-name">
                            <text class="coreshop-font-15 coreshop-text-bold">{{item.products.name}}</text>
                        </view>
                        <view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between">
                            <u-button :plain="true" size="mini" @click="goGoodsDetail(item.products.goodsId)">浏览</u-button>
                        </view>
                    </view>
                    <view style="height: 12.5px;"></view>
                    <view class="cart-shoppingcard-goods">
                        <view class="cart-shoppingcard-goods-checkbtn">
                            <u-checkbox active-color="red" :name="item.id"></u-checkbox>
                        </view>
                        <image class="cart-shoppingcard-goods-image" :src="item.products.images" mode="widthFix"></image>
                        <view class="cart-shoppingcard-goods-body">
                            <view class="cart-shoppingcard-goods-title" v-if="item.products.spesDesc">{{ item.products.spesDesc }}</view>
                            <view class="cart-shoppingcard-goods-title" v-if="item.products.promotionList">
                                <text class="cart-badge cart-bg-gray" v-for="(v, k) in item.products.promotionList" :key="k" :class="v.type !== 2 ? 'bg-gray' : ''"> {{ v.name }}</text>
                            </view>

                            <view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-margin-top-10">
                                <view class="coreshop-flex coreshop-flex-direction-row coreshop-align-center">
                                    <text class="cart-shoppingcard-goods-price">￥{{item.products.price}}</text>
                                    <text class="coreshop-font-10 coreshop-margin-left-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.products.points > 0">
                                        (送 {{item.products.points}}{{ pointShowName}})
                                    </text>
                                </view>
                                <view class="cart-shoppingcard-goods-number">
                                    <u-number-box buttonSize="24" integer :name="index" :value="item.nums" ref="index" @change="toNumberChange" :step="1" :min="1" :max="item.products.stock"></u-number-box>
                                </view>
                            </view>

                            <view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-margin-top-10">
                                <text class="cart-shoppingcard-remove  coreshop-text-green" v-if="item.stockNo">库存不足</text>
                                <text class="cart-shoppingcard-remove  coreshop-text-green" v-else-if="item.stockTension">库存紧张</text>
                                <text class="cart-shoppingcard-remove " v-else=""></text>
                            </view>

                        </view>

                    </view>

                    <view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-margin-top-10">
                        <view class="coreshop-flex coreshop-flex-direction-row coreshop-font-13"  v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.products.pointsDeduction > 0">
                            <view>
                                {{ pointShowName}}兑换价：
                            </view>
                            <view class="coreshop-text-red">
                                {{pointDiscountedProportion * item.products.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.products.price - item.products.pointsDeduction).toFixed(2)}}元
                            </view>
                        </view>
                        <view v-else></view>
                        <u-icon name="trash" size="14" @click="removeGoods" :index="index" label="删除" labelSize="12"></u-icon>
                    </view>

                </view>
            </u-checkbox-group>

        </view>

        <!-- 购物车为空 -->
        <view v-else>
            <view class="coreshop-emptybox">
                <u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/cart.png'" icon-size="150" text="您的购物车空空如也" mode="list"></u-empty>
                <navigator class="coreshop-btn" url="/pages/category/index/index" open-type="switchTab">随便逛逛</navigator>
            </view>
        </view>

        <view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-align-center cart-footer" v-if="shoppingCard.list && shoppingCard.list.length >= 1">
            <view class="cart-shoppingcard-checkbtn coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-align-center">
                <u-checkbox-group v-model="selectAll" @change="itemChangeAll">
                    <u-checkbox name="全选" label="全选" active-color="red"></u-checkbox>
                </u-checkbox-group>
            </view>
            <view class="cart-shoppingcard-count coreshop-flex coreshop-flex-direction-column coreshop-justify-between coreshop-align-left coreshop-margin-right-5"  v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && pointShowMoney>0">
                <view>
                    <text class="cart-text">合计 :</text>
                    <text class="coreshop-font-18 coreshop-text-red">￥{{totalprice}}</text>
                </view>
                <view>
                    <text class="coreshop-font-12">{{ pointShowName}}兑换价：</text>
                    <text class="coreshop-font-12 coreshop-text-red">{{pointShowText}}</text>
                </view>
            </view>
            <view class="cart-shoppingcard-count coreshop-flex coreshop-flex-direction-row coreshop-justify-between coreshop-align-center coreshop-margin-right-5" v-else>
                <text class="cart-text">合计 :</text>
                <text class="coreshop-font-18 coreshop-text-red">￥{{totalprice}}</text>
            </view>
            <view class="cart-shoppingcard-checkout coreshop-bg-red" @tap="checkout">立即结算</view>
        </view>

        <!-- 登录提示 -->
        <coreshop-login-modal></coreshop-login-modal>
    </view>

</template>
<script>
    export default {
        data() {
            return {
                // 总价
                totalprice: '0.00',
                // 选择文本
                // 购物车数据 可以来自 api 请求或本地数据
                shoppingCard: {},
                cartIds: [], //选中ids
                goSettlement: false, //去结算按钮
                selectAll: ['全选'],
                pointShowText: "",
                pointShowMoney: 0,
            }
        },
        //页面加载
        onShow() {
            let userToken = this.$db.get('userToken');
            if (userToken) {
                this.cartIds = [];
                this.getCartData(); //获取购物车数据
                // 初始化时候计算总价，如果使用api 获取购物车项目在 api 请求完成后执行此函数 
                //this.countTotoal();
            }
        },
        computed: {
            // 从vuex中获取店铺名称
            shopName() {
                return this.$store.state.config.shopName;
            },
            GoodsStocksWarn() {
                return this.$store.state.config.goodsStocksWarn;
            },
            pointSwitch() { return this.$store.state.config.pointSwitch },
            pointShowExchangePrice() { return this.$store.state.config.pointShowExchangePrice },
            pointDiscountedProportion() { return this.$store.state.config.pointDiscountedProportion },
            pointExchangeModel() { return this.$store.state.config.pointExchangeModel },
            pointShowName() { return this.$store.state.config.pointShowName },
            pointGetModel() { return this.$store.state.config.pointGetModel },
            pointShowPoint() { return this.$store.state.config.pointShowPoint },
        },
        methods: {
            //数组转字符串
            arrayToStr: function (array) {
                return array.toString();
            },
            //获取购物车数据
            getCartData: function () {
                let _this = this;
                let cartIds = _this.arrayToStr(_this.cartIds);
                let data = {
                    ids: cartIds,
                    display: 'all'
                };
                this.$u.api.cartList(data).then(res => {
                    if (res.status) {
                        _this.shoppingCard = res.data;
                        _this.showHandle(_this.shoppingCard); //数量设置
                        //console.log(_this.shoppingCard);
                    }
                });
            },
            //渲染前配置数据
            showHandle: function (data, flag = true) {
                let _this = this;
                let goSettlement = false;
                for (let i in data.list) {
                    //不可能购买0件
                    if (data.list[i].nums < 1) {
                        data.list[i].nums = 1;
                    }
                    //不能买大于库存的数量(库存不足)
                    let stockNo = false;
                    let maxStock = data.list[i].products.stock;
                    if (data.list[i].nums > data.list[i].products.stock) {
                        stockNo = true;
                        maxStock = data.list[i].nums;
                    }
                    data.list[i].maxStock = maxStock;
                    data.list[i].stockNo = stockNo;

                    //库存紧张
                    let stockTension = false;
                    if (_this.GoodsStocksWarn >= data.list[i].products.stock) {
                        stockTension = true;
                    }
                    data.list[i].stockTension = stockTension;

                    //设置样式
                    data.list[i].minStatus = 'normal';
                    data.list[i].maxStatus = 'normal';
                    if (data.list[i].nums == 1) {
                        data.list[i].minStatus = 'disabled';
                    }
                    if (data.list[i].nums == data.list[i].products.stock) {
                        data.list[i].maxStatus = 'disabled';
                    }

                    //设置规格参数
                    data.list[i].spes = [];
                    if (data.list[i].products.spesDesc != null) {
                        let spesArray = data.list[i].products.spesDesc.split(',');
                        for (let key in spesArray) {
                            let spesOne = spesArray[key].split(':');
                            data.list[i].spes.push(spesOne[1]);
                        }
                    }
                    //添加左滑效果
                    data.list[i].isTouchMove = false;
                    //是否可以去支付
                    if (data.list[i].isSelect) {
                        goSettlement = true;
                    }
                    //id转换为字符串
                    data.list[i].id = _this.arrayToStr(data.list[i].id);
                    //选中状态
                    if (flag) {
                        data.list[i].isSelect = true;
                        if (data.list[i].isSelect) {
                            if (_this.cartIds.indexOf(data.list[i].id) < 0) {
                                _this.cartIds.push(data.list[i].id);
                            }
                        }
                    }
                }
                data.goodsPromotionMoney = _this.$common.formatMoney(data.goodsPromotionMoney, 2, '');
                data.orderPromotionMoney = _this.$common.formatMoney(data.orderPromotionMoney, 2, '');
                data.amount = _this.$common.formatMoney(data.amount, 2, '');
                let isLoad = false;
                if (data.list.length < 1) {
                    isLoad = true;
                }
                let n = 0;
                for (let i in data.promotionList) {
                    n++;
                }

                _this.goSettlement = goSettlement;
                _this.isLoad = isLoad;
                _this.cartNums = n;

                if (flag) {
                    _this.shoppingCard = data;
                } else {
                    _this.getCartData();
                }
                _this.countTotoal();
            },
            //计算总计函数
            countTotoal: function () {
                let _that = this;
                var total = 0;
                var pointsMoneySum = 0;
                var pointsSum = 0;

                for (let i in _that.shoppingCard.list) {
                    if (_that.shoppingCard.list[i].isSelect) {
                        total += Number(_that.shoppingCard.list[i].products.price) * Number(_that.shoppingCard.list[i].nums);
                        _that.pointShowMoney += Number(_that.shoppingCard.list[i].products.pointsDeduction) * Number(_that.shoppingCard.list[i].nums);
                        pointsSum += _that.pointDiscountedProportion * Number(_that.shoppingCard.list[i].products.pointsDeduction) * Number(_that.shoppingCard.list[i].nums);
                        pointsMoneySum += Number(_that.shoppingCard.list[i].products.price - _that.shoppingCard.list[i].products.pointsDeduction) * Number(_that.shoppingCard.list[i].nums);
                    }
                }
                _that.pointShowText = pointsSum + _that.pointShowName + '+' + _that.$common.formatMoney(pointsMoneySum, 2, '');
                _that.totalprice = _that.$common.formatMoney(total, 2, '');
            },
            toNumberChange: function (e) {
                this.$u.throttle(this.numberChange(e), 500)
            },
            numberChange(e) {
                uni.showLoading({
                    title: '加载中',
                    mask: true
                });
                let _this = this;
                let data = {
                    id: this.shoppingCard.list[e.name].productId,
                    nums: e.value
                };
                _this.$u.api.setCartNum(data).then(res => {
                    if (res.status) {
                        _this.shoppingCard.list[e.name].nums = e.value;
                        //重新计算总价
                        this.countTotoal();
                        setTimeout(function () {
                            uni.hideLoading();
                        }, 300);
                    } else {
                        _this.$u.toast(res.msg);
                        setTimeout(function () {
                            uni.hideLoading();
                        }, 300);
                    }
                });

            },
            removeGoods: function (index) {
                let _this = this;
                var index = index;
                uni.showModal({
                    title: '确认提醒',
                    content: '您确定要移除此商品吗？',
                    success: (e) => {
                        if (e.confirm) {
                            //移除数据库
                            let data = {
                                id: _this.shoppingCard.list[index].id
                            };
                            _this.$u.api.removeCart(data).then(res => {
                                if (res.status) {
                                    //清除已经勾选的商品和购物车数据
                                    var idIndex = _this.cartIds.indexOf(_this.shoppingCard.list[index].id);
                                    if (idIndex > -1) {
                                        _this.cartIds.splice(index, 1);
                                    }
                                    _this.shoppingCard.list.splice(index, 1);
                                    //计算总价
                                    _this.countTotoal();
                                    _this.$refs.uToast.show({ message: res.msg, type: 'success', back: false });
                                }
                            });

                        }
                    }
                })
            },
            checkout: function () {
                let _this = this;
                let cartData = _this.shoppingCard.list;
                let newData = '';
                for (let key in cartData) {
                    if (cartData[key].isSelect == true) {
                        newData += ',' + cartData[key].id;
                        _this.goSettlement = true;
                    }
                }
                if (newData.substr(0, 1) == ',') {
                    newData = newData.substr(1);
                }
                if (newData.length > 0) {
                    _this.$u.route('/pages/placeOrder/index/index?orderType=1&cartIds=' + JSON.stringify(newData));
                    return true;
                } else {
                    //没有选择不跳转
                    _this.$refs.uToast.show({ message: "请选择要下单的商品", type: 'error', back: false });
                }

            },
            // 商品选中
            itemChange: function (e) {
                var _this = this;
                _this.cartIds = e;
                var list = _this.shoppingCard.list;
                for (var i = 0; i < list.length; i++) {
                    var bl = _this.cartIds.indexOf(list[i].id) != -1;
                    if (bl) {
                        list[i].isSelect = true;
                    } else {
                        list[i].isSelect = false;
                    }
                }
                _this.shoppingCard.list = list;
                if (_this.cartIds.length == _this.shoppingCard.list.length) {
                    this.selectAll = ['全选'];
                } else {
                    this.selectAll = [];
                }
                this.countTotoal();
            },
            itemChangeAll: function (e) {
                let _this = this;
                if (e.length > 0) {
                    var ids = [];
                    for (var i = 0; i < _this.shoppingCard.list.length; i++) {
                        _this.shoppingCard.list[i].isSelect = true;
                        ids.push(_this.shoppingCard.list[i].id);
                    }
                    _this.cartIds = ids;
                } else {
                    for (var i = 0; i < _this.shoppingCard.list.length; i++) {
                        _this.shoppingCard.list[i].isSelect = false;
                    }
                    _this.cartIds = [];
                }
                this.countTotoal();
            },
        }
    }
</script>
<style lang="scss" scoped>
    @import "cart.scss";
</style>